<%= render "header" %>

<%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
<hr/>

<h1>Server Rendered/Cached React/Redux Component</h1>
<p>
  This example demonstrates server side rendering using Redux. The only difference from client rendering is that
  the <code>prerender</code> option is true.<br/><br/>
  The source HTML of this page will show the server rendered HTML.<br/>
  <pre>
    <%= '<div id="ReduxApp-react-component-0"><div data-reactid=".uwwa3eq70g" data-react-checksum="-1318287018">' %>
    <%= '<h3 data-reactid=".uwwa3eq70g.0"><span data-reactid=".uwwa3eq70g.0.0">Redux Hello, </span><span data-reactid=".uwwa3eq70g.0.1">' %>
    <%= 'Mr. Server Side Rendering</span><span data-reactid=".uwwa3eq70g.0.2">!</span></h3><p data-reactid=".uwwa3eq70g.1">' %>
    <%= '<span data-reactid=".uwwa3eq70g.1.0">With Redux, say hello to:</span>' %>
    <%= '<input type="text" value="Mr. Server Side Rendering" data-reactid=".uwwa3eq70g.1.1"></p></div></div>' %>
  </pre>
</p>

<hr/>
<h2>Setup</h2>
<ol>
  <li>
    Create redux listening component: spec/dummy/client/app/components/HelloWorldRedux.jsx
  </li>
  <li>
    Create redux container: spec/dummy/client/app/components/HelloWorldContainer.jsx
  </li>
  <li>
    Create redux app client side: spec/dummy/client/app/startup/ClientReduxApp.jsx
  </li>
  <li>
    Create redux app server side: spec/dummy/client/app/startup/ServerReduxApp.jsx
  </li>
  <li>
    Expose the Redux Component on the client side:
    spec/dummy/client/app/startup/clientRegistration.jsx
    <br/>
    <pre>
    import ReduxApp from './ClientReduxApp';
    import ReactOnRails from 'react-on-rails';
    ReactOnRails.register({ ReduxApp });
    </pre>
  </li>
  <li>
    Expose the Redux Component on the server side:
    spec/dummy/client/app/startup/serverRegistration.jsx
    <br/>
    <pre>
    import ReduxApp from './ServerReduxApp';
    global.ReduxApp = ReduxApp;
    </pre>
  </li>
  <li>
    Place the component on the view: spec/dummy/app/views/pages/server_side_redux_app.html.erb
    <br/>
    <pre>
    <%%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
    </pre>
  </li>
</ol>
